import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useSelector, useDispatch } from 'react-redux'
import {
    Box,
    Grid,
    Typography,
    TableContainer,
    Table,
    TableBody,
    TableRow,
    TableCell,
    TableHead,
} from '@material-ui/core';
import { Switch } from 'antd';
import { Icon } from 'components/atoms';

import { callGetNewsApi } from 'utils/networking';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
import { addPlayList } from 'redux/actions/PlaylistActions';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        maxWidth: "1400px",
        margin: "0 auto",
        overflow: "hidden",
        padding: "20px",
        [theme.breakpoints.up('md')]: {
            padding: "50px",
        },
    },
    typography: {
        fontSize: "14px",
        textTransform: "uppercase",
        color: "#fff",
        lineHeight: "30px",
        // width:"200px",
        // [theme.breakpoints.up('sm')]: {
        //     width:"300px",
        // },
        // [theme.breakpoints.up('md')]: {
        //     width:"500px",
        // },
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
        overflow: "hidden",
    },
    typography1: {
        // width: "100px",
    },
    typography2: {
        fontSize: "12px",
        lineHeight: "24px",
        textTransform: "capitalize",
        color: "#fff",
        marginLeft: "10px",
        width: "50px",
        [theme.breakpoints.up('md')]: {
            fontSize: "14px",
        },
    },
    grid: {
        flexWrap: "nowrap",
        display: "flex",
        justifyContent: "end",
    },
    gridItem: {
        width: "auto",
    },
    card: {
        backgroundColor: "#fff",
        color: "#000",
        padding: "5px 10px",
        marginRight: "20px",
        cursor: "pointer",
    },
    btn: {
        backgroundColor: "#FF0000",
        color: "#fff",
        padding: "5px 10px",
        marginRight: "20px",
        cursor: "pointer",
    },
    table: {
        minWidth: 750,
        "& th": {
            border: "none",
            borderBottom: "1px solid rgba(81, 81, 81, 1)",
            padding: 0,
            color: "#fff",
            lineHeight: "80px",
        },
        "& td": {
            border: "none",
            borderBottom: "1px solid rgba(81, 81, 81, 1)",
            fontSize: "14px",
            lineHeight: "80px",
            padding: 0,
            color: "#fff",
        },
    },
    tableRow: {
        backgroundColor: "#333",
        "&:hover": {
            opacity: "1",
        },
    },
    switch: {
        backgroundColor: "#fff !important",
        "&:hover": {
            backgroundColor: "#fff !important",
        },
        "& .ant-switch-handle::before": {
            backgroundColor: "#333",
        }
    },
}));

function PlaylistInfo(props) {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    const profileData = useSelector((state) => state.auth.profileData)

    const dispatch = useDispatch()
    const history = useHistory();

    const [playlists, setPlaylists] = useState([]);
    useEffect(() => {
        getServerPlaylistsProps()
    }, [])
    const getServerPlaylistsProps = async () => {
        if (!profileData || !profileData.id) {
            history.push(`signin`);
            return;
        }
        callGetNewsApi(`song/user_playlists?user_id=${profileData.id}&all=1`, dispatch, (data) => {
            console.log(data);
            setPlaylists(data);
        })
    }

    // console.log(profileData)

    const [playlistSwitch, setPlaylistSwitch] = useState(false)
    const switchChange = (checked) => {
        console.log(`switch to ${checked}`);
        setPlaylistSwitch(checked)
    };

    return (
        <div className={clsx(classes.root)} >
            <Box style={{ marginTop: "30px" }}>
                <div className={classes.grid}>
                    <Grid container justifyContent='flex-end' className={classes.gridItem}>
                        <div className={classes.btn}>
                            DELETE PLAYLIST
                        </div>
                    </Grid>
                    <Grid container justifyContent='flex-end' className={classes.gridItem}>
                        <div className={classes.card}>
                            Change Order
                        </div>
                    </Grid>
                    <Grid container justifyContent='flex-end' alignItems='center' className={classes.gridItem}>
                        <Switch onChange={switchChange} className={classes.switch} />
                        <Typography className={classes.typography2}>{
                            playlistSwitch ? "Public" : "Private"
                        }</Typography>
                    </Grid>
                </div>

                <TableContainer>
                    <Table
                        aria-labelledby="tableTitle"
                        size="small"
                        className={classes.table}
                    >
                        <TableHead>
                            <TableRow>
                                <TableCell></TableCell>
                                <TableCell align="center">Title</TableCell>
                                <TableCell align="center">Streams on Playlist</TableCell>
                                <TableCell align="center">Artist</TableCell>
                                <TableCell align="center">Album</TableCell>
                                <TableCell align="center">File Location</TableCell>
                                <TableCell align="center">Delete</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            <TableRow
                                hover
                                className={classes.tableRow}
                            >
                                <TableCell
                                    align="center"
                                    onClick={() => {
                                    }}
                                >
                                    5555
                                </TableCell>
                                <TableCell
                                    align="center"
                                    onClick={() => {
                                    }}
                                >
                                    <Typography className={classes.typography}>
                                        Time Today
                                    </Typography>
                                </TableCell>
                                <TableCell
                                    align="center"
                                    onClick={() => {
                                    }}
                                >
                                    <Typography className={clsx(classes.typography, classes.typography1)}>
                                        145
                                    </Typography>

                                </TableCell>

                                <TableCell
                                    align="center"
                                >
                                    <Typography className={clsx(classes.typography)}>
                                        33trapper
                                    </Typography>
                                </TableCell>

                                <TableCell
                                    align="center"
                                    onClick={() => {

                                    }}
                                >
                                    <Typography className={clsx(classes.typography)}>
                                        2022 Freestyles
                                    </Typography>
                                </TableCell>
                                <TableCell
                                    align="center"
                                    onClick={() => {

                                    }}
                                >
                                    <Typography className={clsx(classes.typography)}>
                                        Images-01
                                    </Typography>
                                </TableCell>
                                <TableCell
                                    align="center"
                                    onClick={() => {

                                    }}
                                >
                                    <Icon
                                        fontIconClass="far fa-trash-alt"
                                        style={{ color: "#fff", }}
                                    />
                                </TableCell>
                            </TableRow>
                        </TableBody>

                    </Table>
                </TableContainer>
            </Box>
        </div>
    )
}

PlaylistInfo.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default PlaylistInfo

